<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>结项文档</span>
        <el-upload
          class="upload"
          :action= uploadUrl
          multiple
          :data="{bizId: query.id, bizType: uploadType}"
          :headers="{
            token: this.token
          }"
          :limit="3"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div class="documentList" v-for="(item, index) in fileList" :key="index">
        <div>{{item.name}}</div>
        <div>
          <el-button type="success" size="mini">
             <a :href="item.url" :download="item.name" class="download">下载</a>
          </el-button>
          <el-button type="danger" size="mini" @click="remove(item.id)">删除</el-button>
        </div>
      </div>
    </el-card>
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="审批流程" name="first">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>审批流程</span>
          </div>
          <div v-for="(item, index) in approveNode" :key="index">
            <div class="documentList">
              <div class="approveNode">{{item.name}}</div>
              <el-button type="text" @click="select(item.name, index, item.approveType)" v-if="item.userList.length == 0" class="name">选择</el-button>
              <div v-else class="name">
                <div class="nameText" v-for="(user, userIndex) in item.userList" :key="user.id" @click="reselect(index, user.name, userIndex, item.name, item.approveType)">{{user.name}}</div>
                <el-button type="text" @click="select(item.name, index, item.approveType)" v-if="item.approveType == 2 && item.userList.length != 0 && status == 'application'" class="name">选择</el-button>
              </div>
              <div v-if="status != 'application'" class="status">
                <div v-for="user in item.userList" :key="user.id">{{user.approveText}}<span v-if="user.approveOpinion && user.approveStatus == '4'">({{user.approveOpinion}})</span></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="审批记录" name="second" v-if="query.projectStatus > 6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>审批记录</span>
          </div>
          <div v-for="(item, index) in approveNode" :key="index">
            <div class="documentList">
              <div class="approveNode">{{item.name}}</div>
              <div class="name">
                <div class="nameText" v-for="(user, userIndex) in item.userList" :key="user.id" @click="reselect(index, user.name, userIndex, item.name, item.approveType)">{{user.name}}</div>
              </div>
              <div class="status">
                <div v-for="user in item.userList" :key="user.id">{{user.approveText}}<span v-if="user.approveOpinion && user.approveStatus == '4'">({{user.approveOpinion}})</span></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="选择审批人" :visible.sync="dialogVisible" width="600px">
      <UserSelect :roleId="roleId" :checkList="checkList" v-if="dialogVisible" @changeCheckList="changeCheckList" :isSingle="isSingle"></UserSelect>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectedRole">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="rejectVisible" >
      <el-input v-model="rejectText" placeholder="请填写驳回理由"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reject">确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="primary" class="commit" @click="commit" v-if="this.$route.query.projectStatus == '6'">提交申请</el-button>
    <el-button type="primary" class="commit" @click="pass" v-if="control">通过</el-button>
    <el-button type="danger" class="commit" @click="rejectVisible = true" v-if="control">驳回</el-button>
  </div>
</template>
<script>
import approveBase from '../../base/approveBase';
export default {
  mixins: [approveBase],
  mounted() {
    this.uploadType = $conf.uploadType['settlement'];
    this.bizType = $conf.bizType['settlement'];
    this.getUploadFile(this.$route.query.id);
    this.getApproveNode($conf.modelId['settlement']);
    let projectStatus = this.$route.query.projectStatus;
    //判断当前状态
    if(projectStatus <= 6) {
      this.status = 'application';
    } else {
      this.status = 'appliced';
    }
    if(this.query.status) {
      this.status = this.query.status
    }
  }
};
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
.documentList {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.upload {
  position: absolute;
  right: 15px;
  top: 32px;
}
.commit {
  margin-top: 30px;
}
.name {
  width: 50px;
  height: 40px;
}
.download {
  color: #fff;
  text-decoration: none;
}
</style>